<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

		<style type="text/css">
			body{
				overflow: hidden;
			}
			.bird {
				width: 20px;
				height: 20px;
				position: absolute;
				left: 20%;
				top: 50%;
				transform: translate(-50%, -50%);
				background-color: red;
			}
			
			.topG {
				position: absolute;
				top: 0;
				background-color: black;
				width: 50px;
				left: 100%;
			}
			
			.botG {
				position: absolute;
				background-color: black;
				width: 50px;
				left: 100%;
			}
		</style>
	</head>

	<body>
		<div class="bird"></div>
		<script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/common.js" type="text/javascript" charset="utf-8"></script>
		<!--<script src="js/index.js" type="text/javascript" charset="utf-8"></script>-->
		<script type="text/javascript">
			var bird = document.querySelector(".bird"),
				timer,
				is_speed = 0,
				is_true = false,
				pipe_timer,
				big_timer;
			/*
			 * 自由落体
			 */
			clearInterval(timer);
			timer = setInterval(function() {
				is_speed++; // 落体速度
				var free_fall = is_speed + bird.offsetTop;
				if(free_fall < 0) {
					is_true = true;
					free_fall = 0;
					is_speed = 0;
					clearInterval(big_timer);
					clearInterval(pipe_timer);
				}
				if(free_fall > innerHeight - bird.offsetHeight) {
					is_true = true;
					is_speed = 0
					clearInterval(big_timer);
					clearInterval(pipe_timer);
					clearInterval(timer);

				}
				bird.style.top = free_fall + "px";
			}, 30)
			document.onclick = function() {
				if(is_true) return;
				is_speed -= 20;
			}
			/*
			 * 随机数封装
			 */
			function random(min, max) {
				return Math.floor(Math.random() * (max - min + 1) + min);
			}
			/*
			 * 管子封装
			 */
			function pipe() {
				var top_div = document.createElement("div"),
					bot_div = document.createElement("div");
				top_div.className = "topG";
				top_div.left_data = 150; // 自定义属性

				bot_div.className = "botG";
				//				bot_div.left_data = 150;
				var h = random(80, 350); // 上面管子的高度
				top_div.style.height = h + "px";
				bot_div.style.height = innerHeight - h - 150 + "px"; // 下面管子的高度
				bot_div.style.top = h + 150 + "px";
				document.body.appendChild(top_div);
				document.body.appendChild(bot_div);
			}
			pipe_timer = setInterval(pipe, 1000);
			//			clearInterval(bigtimer);
			big_timer = setInterval(function() {
				var alltopG = document.querySelectorAll(".topG"),
					allbotG = document.querySelectorAll(".botG");
				for(var i = 0; i < alltopG.length; i++) {
					if(setBoom(bird, alltopG[i]) || setBoom(bird, allbotG[i])) {
						is_true = true;
						clearInterval(big_timer);
						clearInterval(pipe_timer);
					}
					if(alltopG[i].left_data == "-20") {
						document.body.removeChild(alltopG[i]);
						document.body.removeChild(allbotG[i]);
						continue;
					}
					allbotG[i].style.left = alltopG[i].style.left = alltopG[i].left_data - 1 + "%";
					alltopG[i].left_data = alltopG[i].left_data - 1;
				}

				//				alltopG.forEach(function(obj, index) {
				//					if(setBoom(bird, alltopG[index]) || setBoom(bird, allbotG[index])) {
				//						alert("hehe");
				//					}
				//					if(obj.left_data == "-20") { // 超出视口宽度就删除
				//						document.body.removeChild(obj);
				//						document.body.removeChild(allbotG[index]);
				//						continue;
				//					}
				//					allbotG[index].style.left = obj.style.left = obj.left_data - 1 + "%";
				//					obj.left_data = obj.left_data - 1;
				//				})
			}, 30)
		</script>
	</body>

</html>